const BASE_URL = 'http://localhost:3000'
//一.获得待办, 封装成函数,方便下面调用
function getTodos() {
  //1,发送AJAx请求
  $.ajax({
    url: `${BASE_URL}/lists`,
    type: 'GET',
    success: function (res) {
      console.log(res)
      // 解构res对象
      const { code, message, result } = res

      if (code == 0) {
        // 清空ul中的数据
        $('.list').empty()
        result.forEach((item) => {
          //2,添加标签
          $('.list').prepend(`<li>
                                    <p>${item.content}</p>
                                    <span>${item.updated_time}</span>
                                    <button type="button" class="btn iconfont icon-bianji" onclick="handlePut(this,${item.id})"></button>
                                    <button type="button" class="btn iconfont icon-shanchu1" onclick="handleDel(${item.id})"></button>
                                </li>`)
        })
      } else {
        alert(message)
        console.log(message);
        
      }
    },
  })
}
getTodos()

//二,添加待办
// 1,监听键盘
$('.header input').on('keyup', function (e) {
  // 2,判断回车
  if (e.keyCode == 13) {
    let content = $(this).val()
    //3,判断文本框内容, trim()去掉首尾空格
    if (content.trim() == '') {
      alert('请添加待办')
      return
    }
    //4,发送ajax请求
    $.ajax({
      url:  `${BASE_URL}/lists`,
      type: 'POST',
      data: { content },
      success: function (res) {
        $('.header input').val('')
        const { code, message } = res
        if (code === 0) {
          //重新获取数据,相当于刷新
          getTodos()
        }else{
          alert(message)
        }
      },
    })
  }
})

//三,修改待办
//注意:行内事件没有this,指向window,行内事件有this,this指向事件对象
function handlePut(obj, id) {
  //1, 获取p标签的文本
  console.log(obj) //<button type="button" class="iconfont icon-bianji" onclick="handlePut(this,${item.id})"></button>
  let p = $(obj).siblings('p')
  let content = p.text()
  p.hide() //p标签隐藏

  //2, 添加input标签,并将获取到的文本添加在input中
  let input = $(`<input type="text" autocomplete="off" value="${content}"/>`)
  $(obj).parent('li').prepend(input) //注意:如果没有$(obj),会给所有li标签都添加input标签

  //3, 阻止input的冒泡
  input.click(function (e) {
    e.stopPropagation()
    return false
  })

  //4.input失焦,获取input标签的值,添加到p标签中,并使input标签隐藏
  input.blur(function () {
    //5.获取input标签的值, 添加到p标签中
     content = $(this).val()
    console.log(content)
    p.text(content).show()
    $(this).hide() //input标签隐藏

    //6.发送ajax请求
    $.ajax({
      url:  `${BASE_URL}/lists/${id}`,
      type: 'PUT',
      data: { content }, //注意: 这里要是传p.text(text)就会报错,$(this).val()就不会报错,很怪
      success: function (res) {
        const { code, message } = res
        if (code === 0) {
          //重新获取数据,相当于刷新
          getTodos()
        }else{
          alert(message)
        }
      },
    })
  })
}

//四,删除待办
function handleDel(id) {
  $.ajax({
    url: `${BASE_URL}/lists/${id}`,
    type: 'DELETE',
    success: function (res) {
      const { code } = res
      if (code === 0) {
        getTodos()
      }else{
        alert(message)
      }
    },
  })
}
